<template>
  <div style="min-height: 500px;margin-top: 40px;" v-loading="loading" element-loading-background="rgba(255, 255, 255 0.8)">
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('username')}">
        <input type="text" required v-model="personal.username" v-validate="'required|max:20'" name="username" autocomplete="off" />
        <label data-content="姓名*"></label>
      </div>
      <div class="form-right flex-row gender">
        <label class="ewai">性别*</label>
        <el-radio v-model="personal.sex" label="1" class="man-radio">
          男
          <span class="gender-checked" v-show="personal.sex === '1'"></span>
        </el-radio>
        <el-radio v-model="personal.sex" label="2" class="nv-radio">
          女
          <span class="gender-checked" v-show="personal.sex === '2'"></span>
        </el-radio>
      </div>
    </div>
    <div class="flex-row " >
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('birthday')}">
        <el-date-picker
         v-validate="'required'" name="birthday"
         class="width-full date-icon-right"
         v-model="personal.birthday" 
         value-format="yyyy-MM-dd"
         format="yyyy-MM-dd"
         placeholder="">
       </el-date-picker>
        <label data-content="出生日期*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('cityName')}">
        <city-cascader v-model="personal.city"
        v-validate="'required|city'" name="cityName"
        :provinceCode.sync="personal.provinceCode"
        :cityCode.sync="personal.cityCode"
        :areaCode.sync="personal.areaCode"
        ></city-cascader>
        <label data-content="所在城市*"></label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('phone')}">
        <input type="text" required v-model="personal.phone" v-validate="'required|phone'" name="phone"/>
        <label data-content="手机*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('email')}">
        <input type="text" required v-model="personal.email" v-validate="'required|email'" name="email"/>
        <label data-content="Email*"></label>
      </div>
    </div>
    
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('education')}">
        <el-select v-model="personal.education " placeholder="" class="width-full" v-validate="'required'" name="education">
          <el-option
            v-for="item in options"
            :filterable="true"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <label data-content="最高学历*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('graduatedSchool')}">
        <input type="text" required v-model="personal.graduatedSchool" v-validate="'required'" name="graduatedSchool"/>
        <label data-content="毕业院校*"></label>
      </div>
    </div>

    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('profession')}">
        <input type="text" required v-model="personal.profession" v-validate="'required'" name="profession"/>
        <label data-content="专业*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('graduationTime')}">
        <el-date-picker
         v-validate="'required'" name="graduationTime"
         class="width-full date-icon-right"
         v-model="personal.graduationTime"
         value-format="yyyy-MM-dd"
         format="yyyy-MM-dd"
         placeholder="">
       </el-date-picker>
        <label data-content="毕业时间*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('salary')}">
          <el-select v-model="personal.expectedSalary " placeholder="" class="width-full" v-validate="'required'" name="salary">
            <el-option
              v-for="item in salaries"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="期望薪资*"></label>
        </div>
        <div class="material-textfield green form-right" :class="{'validate-err': errors.has('workYear')}">
          <el-select v-model="personal.workYear " placeholder="" class="width-full" v-validate="'required'" name="workYear">
            <el-option
              v-for="item in years"
              :filterable="true"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label data-content="工作经验*"></label>
        </div>
    </div>

    <div class="textarea-con" :class="{'validate-err': errors.has('companyIntroduce')}" style="margin-bottom: 10px;">
      <label data-content="自我介绍">自我介绍&nbsp;&nbsp;&nbsp;<span style="color: #C0C0C0;">6-1000字</span></label>
      <textarea rows="6" class="width-full" v-model="personal.selfIntroduction" v-validate="'min:6|max:1000'" name="companyIntroduce"></textarea>
    </div>

    <!-- 个人简历附件 -->
    <div class="flex-row vip-upload">
      <label data-content="上传个人简历附件">上传个人简历附件</label>
      <file-upload 
        ref="upload" 
        v-model="personal.attachment"
        accept="image/*,.doc,.docx,.pdf,.jpg,.png,.jpeg"
        :limit="3"
        >
        <el-button slot="trigger" class="width-200">选取文件</el-button>
        <span slot="tip" class="el-upload__tip"
        >个人简历附件,支持word,pdf,图片等格式,最多不超过3个</span>
      </file-upload>
    </div>

    <el-col :span="24" style="margin-top: 45px;text-align: center;">
      <el-button type="success" round plain class="width-100" @click="priview()">预览</el-button>
      <el-button type="success" round class="width-200" @click="confirm()">保存</el-button>
    </el-col>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'curriculumvitae',
  title: '个人简历',
  data() {
    return {
      loading: false,
      personal: {
        userId: this.$store.state.user.user.user.userId,
        username: this.$store.state.user.user.userDetails.nickName,
        sex: '1 ',
        birthday: '',
        city: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        phone: this.$store.state.user.user.userDetails.phone,
        email: '',
        education: '',
        graduatedSchool: '',
        profession: '',
        graduationTime: '',
        selfIntroduction: '',
        attachment: '',
        expectedSalary: '',
        workYear: ''
      },
      options: [
        {label: '博士', value: 'DOCTOR'},
        {label: '硕士', value: 'MASTER'},
        {label: '本科', value: 'BACHELOR'},
        {label: '大专', value: 'COLLEGE'},
        {label: '中技', value: 'TECHNICAL_SCHOOL'},
        {label: '中专', value: 'TECHNICAL_SECONDARY_SCHOOL'},
        {label: '高中以下', value: 'HIGH_SCHOOL'}
      ],
      salaries: [
        {label: '1k以下', value: '1k以下'},
        {label: '1k-2k', value: '1k-2k'},
        {label: '2k-4k', value: '2k-4k'},
        {label: '4k-6k', value: '4k-6k'},
        {label: '6k-8k', value: '6k-8k'},
        {label: '8k-10k', value: '8k-10k'},
        {label: '10k-15k', value: '10k-15k'},
        {label: '15k-20k', value: '15k-20k'},
        {label: '20k以上', value: '20k以上'}
      ],
      years: [
        {label: '无', value: '无'},
        {label: '1-3年', value: '1-3年'},
        {label: '3-5年', value: '3-5年'},
        {label: '5-10年', value: '5-10年'},
        {label: '10年以上', value: '10年以上'}
      ]
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    initData () {
      axios.post('/mscs/resume/findPersonalResume', this.$paramsConvert({userId: this.$store.state.user.user.user.userId})).then(res => {
        if (res.data.code === 1) {
          if (res.data.data) {
            Object.assign(this.personal, res.data.data)
            this.personal.birthday = this.$formatYMD(this.personal.birthday)
            this.personal.graduationTime = this.$formatYMD(this.personal.graduationTime)
            this.personal.sex = this.personal.sex.toString()
          }
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    confirm () {
      
      this.$validator.validate().then(result => {
        if (result) {

          if (this.personal.selfIntroduction.length < 6 && this.personal.attachment.length === 0) {
            this.$confirm('自我介绍和个人简历附件至少填写一个', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
            })
            return
          }

          if (this.personal.attachment.length === 0) {
            this.personal.attachment = ''
          }
          if (typeof this.personal.attachment === 'object') {
            this.personal.attachment = JSON.stringify([
              ...this.personal.attachment.map(item => {
                item.type = 'attachment'
                return item
              })
            ])
          }
          axios.post('/mscs/resume/createOrUpdatePersonalResume', this.personal).then(res => {
            if (res.data.code === 1) {
              this.$message({
                showClose: true,
                message: '保存成功',
                type: 'success'
              })
            } else {
              this.$codeError(res)
            }
          }).catch(error => {
            this.$catchError(error)
          })
        } else {
          this.$alert('保存失败，信息填写不完整或不正确，其中标注红色为未填写或填写错误', {
            confirmButtonText: '确定',
          })
        }
      })
    },
    priview () {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.personal.selfIntroduction.length < 6 && this.personal.attachment.length === 0) {
            this.$confirm('自我介绍和个人简历附件至少填写一个', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
            })
            return
          }
          // 使用query传递数据时候，对象中的对象将被转化为'object'，出现内容丢失的问题
          let obj = JSON.parse(JSON.stringify(this.personal))
          if (obj.attachment.length > 0) {
            obj.attachment = JSON.stringify(obj.attachment)
          }
          const {href} = this.$router.resolve({
            name: 'vitaepreview',
            params: {id: 'priview'},
            query: obj
          })
          window.open(href, '_blank')
        } else {
          this.$alert('预览失败，信息填写不完整或不正确，其中标注红色为未填写或填写错误', {
            confirmButtonText: '确定',
          })
        }
      })
    }
  },
  watch: {
    '$store.state.user.token' (val) {
      if (val) {
        this.initData()
      }
    }
  },
}
</script>
<style lang = 'sass'>
</style>